<script  setup>
import Card from "../../help/Card.vue";

const columns = [
  { label: '敏感度', value: 10},
  { label: '灵活度', value: 9},
  { label: '创新度', value: 6},
  { label: '自信度', value: 10},
  { label: '活跃度', value: 5},
  { label: '安全度', value: 10},
  { label: '完成度', value: 10},
  { label: '准确度', value: 10},
  { label: '进取度', value: 10},
  { label: '热爱度', value: 10},
]
</script>

<template>
  <Card title="十度掌握情况" class="basis-2/7 w-full h-full mb-3 animate__animated animate__fadeInTopLeft">
    <div class="w-full h-full flex flex-col gap-y-1">
      <div class="flex h-full flex-col items-center overflow-y-scroll mt-3 text-base">
        <div class="w-full h-[50px] flex flex-col items-center justify-center gap-y-1"
             v-for="i in columns"
             :key="i.label"
        >
          <div class="flex justify-between items-center w-full h-full">
            <span style="color:#4A5A7F" class="flex items-center">{{i.label}}</span>
            <span class="font-extrabold text-2xl italic">{{i.value}}</span>
          </div>
          <div class="w-full h-[12px] bg-slate-100 rounded relative">
            <div class="h-full rounded absolute left-0 top-0 bg-blue-600"
                 :style="{width: i.value / 10 * 100 + '%'}"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>
